<template>
  <div class="container">
    <div class="add">
      <el-input placeholder="请输入内容/左侧可以选中分类查询" v-model="search" class="input-with-select">
        <el-select v-model="search" slot="prepend" placeholder="">
          <el-option  v-for="item in categorys"
                      :key="item._id"
                      :label="item.name"
                      :value="item.name"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="searchF"></el-button>
      </el-input>
      <el-button type="primary" @click="getGoodsAll">全部商品</el-button>
      <el-button type="success" @click="addGoods">增加商品</el-button>
    </div>
    <el-divider></el-divider>
    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column
          prop="category"
          label="商品类别"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="商品名称"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="price"
          label="商品价格/元"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="num"
          label="商品数量"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="isSale"
          label="是否在售"
          align="center"
      >
      </el-table-column>
      <el-table-column
          label="商品图片"
          align="center"
      >
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
               :src="scope.row.imgs.length>0?'http://localhost:7000/file/download?filename='+scope.row.imgs[0]:''"
               fit="scale-down"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
      >
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="editGoods(scope)">修改</el-button>
          <el-button size="small" type="danger" @click="delGoods(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data(){
    return{
      categorys:[],
      search:'',
      //表格数据
      tableData: [],
      //分页变量
      currentPage:1,
      pageSize:10,
      total:0
    }
  },
  async created() {
    this.getGoods()
   await this.getCategoryAll()
  },
  methods:{
    getGoodsAll(){
       this.search=''
       this.currentPage=1
       this.getGoods()
    },
    searchF(){
      this.currentPage=1
      this.total=0
      this.getGoods()
    },
    //删除商品
    delGoods(_id){
      this.$confirm(`您确定删除吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 确定操作
        const result=await this.$http.delete(`goods/del/${_id}`)
        if(result.data.status=="success"){
          this.$message.success("删除成功")
          this.getGoods()
        }else {
          this.$message.success("删除失败,请稍后重试...")
        }
      }).catch(() => {
        // 取消操作
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    //获取商品所有分类
    async getCategoryAll(){
      const result=await this.$http.get("/category/all")
      if(result.data.status=="success"){
        this.categorys=result.data.data
      }else{
        this.$message.error("获取商品类别失败...")
      }
    },
    //获取商品列表
    getGoods(){
      const param={params:{currentPage:this.currentPage,pageSize:this.pageSize,search:this.search}}
      this.$http.get('goods/getGoods',param).then((res)=>{
        if(res.data.status=='success'){
          this.total=res.data.total
          this.tableData=res.data.data
        }
      }).catch((err)=>{
        this.$message.error("网络错误...")
      })
    },
    //修改商品
    editGoods(scope){
      this.$router.push({
        name:'goodsEdit',
        query:{
          action:'edit',
          info:JSON.stringify(scope.row)//只能传递字符串
        }
      })
    },
    //跳转添加商品页面
    addGoods(){
      this.$router.push({
        name:'goodsEdit',
        query:{
          action:'add'
        }
      })
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage=val
      //刷新新页
      this.getGoods()
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  padding: 10px;
  .add {
    display: flex;
    .el-input{
      width: 500px;
    }
    .el-button{
      margin-left: 30px;
    }
  }
  .el-table-column{
    //width: 100px;
    //height: 100px;
     //height: ;
  }
}
</style>